import {just} from '../../static/just-animate-all.js'


export default {

  name: 'Home',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      t: null
    }
  },
  created(){
    // http.indexTest("dongchen").then(function (resp) {
    //   console.log(resp)
    // })
  },
  mounted(){
    this.test()
  },
  methods:{
      test(){
      var attribution = just.splitText("small").characters;
      var quote = just.splitText(".quote").words;
      this.wrapWords(quote);

      var t1 = just.timeline();
      this.t = t1;

      t1.set({
        targets: quote,
        web: {
          opacity: 0
        }
      });

      t1.set({
        targets: attribution,
        web: { opacity: 0 }
      });

      t1.animate({
        targets: quote,
        stagger: 300,
        delay: 200,
        easing: "ease-out",
        duration: 900,
        web: {
          opacity: [0, 1],
          y: ["200%", 0]
        }
      });

      t1.animate({
        targets: attribution,
        duration: 700,
        stagger: 20,
        easing: "ease-out",
        web: {
          opacity: [0, 1],
          y: ["200%", 0]
        }
      });

      t1.animate({
        targets: ".note",
        delay: 500,
        duration: 600,
        easing: "linear",
        web: { opacity: [0, 1] }
      });

      t1.play();

      t1.once("finish", function() {
        t1.reverse();
      });


    },
    clickBtn(){
      this.t.play({
        alternate: true,
        repeat: 2
      });
    },
    wrapWords(words) {
      return words.map(function(w) {
        var parent = w.parentNode;
        var wrapper = document.createElement("span");
        wrapper.classList.add("word-wrapper");
        parent.insertBefore(wrapper, w);
        parent.removeChild(w);
        wrapper.appendChild(w);
        return w;
      });
    }
  }
}
